<template>
  <!-- 联合巡检-巡检结果对比分析 -->
  <div class="analyzing-results-inspection">
    <div class="top betweenbox">
      <div class="top-title">
        <!-- <i class="iconfont iconfloodLighting-o"></i> -->
        <span>巡检结果对比分析</span>
      </div>
      <div class="top-back" @click="goBack"></div>
    </div>

    <div class="main betweenbox">
      <!-- 树图 -->
      <div class="main-left borderStyle">
        <div class="content-tree">
          <el-input placeholder="输入关键字进行过滤" v-model="video">
            <i slot="prefix" class="el-input__icon el-icon-search search"></i>
          </el-input>
          <div class="margin"></div>
          <el-tree
            :data="treeData"
            icon-class="custom"
            :props="defaultProps"
            ref="tree"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
          >
            <div class="custom-tree-node betweenbox" slot-scope="{ node }">
              <!-- <el-tooltip effect="dark" placement="top" :content="node.label"> -->
            <div>
              <span :title="node.label">{{ node.label }}</span>
            </div>
          <!-- </el-tooltip> -->
            </div>
          </el-tree>
        </div>
      </div>

      <div class="main-right colbetweenbox bigTableStyle">
        <!-- 表单表格 -->
        <div class="main-right-top">
          <!-- 表单 -->
          <div class="form">
            <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="1.25rem">
              <el-row>
                <!-- <el-col :span="6">
                  <el-form-item label="所属地市：">
                    <el-select
                      v-model="form.ssds"
                      size="small"
                      placeholder="请选择"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in CompanyList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <!-- <el-col :span="6">
                  <el-form-item label="变电站名称：">
                    <el-select
                      v-model="form.stationId"
                      size="small"
                      placeholder="请选择"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in SubstationList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="维护班组：">
                    <el-select
                      v-model="form.deviceName"
                      size="small"
                      placeholder="请选择"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in getWhbzList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="6">
                  <el-form-item label="巡视点类型：">
                    <el-select
                      v-model="form.xjdlx"
                      size="small"
                      placeholder="请选择"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in inspectiontype_options"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="任务状态：">
                    <el-select v-model="form.rwzt" size="small" placeholder="请选择" clearable>
                      <el-option
                        v-for="item in taskStatusList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="巡视类型：">
                    <el-select
                      v-model="form.deviceName"
                      size="small"
                      placeholder="请选择"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in InspectTypeList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="起始时间：" prop="kssj">
                    <el-date-picker type="date" v-model="form.kssj" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="结束时间：" prop="jssj">
                    <el-date-picker type="date" v-model="form.jssj" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :offset="12">
                  <div class="endbox form-btn">
                    <el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <!-- 表格 -->
          <div class="table">
            <el-table
            border
              :data="tableData"
              style="width: 100%"
              height="100%"
              @selection-change="handleSelectionChange"
              :row-class-name="tableRowClassName"
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.5)"
            >
              <el-table-column prop="NUM" label="序号" width="60"></el-table-column>
              <el-table-column prop="SSDSMC" label="所属地市" :show-overflow-tooltip="true" width="160"></el-table-column>
              <el-table-column prop="BDZMC" label="变电站名称" :show-overflow-tooltip="true" width="160"></el-table-column>
              <el-table-column prop="WHBZMC" label="维护班组" :show-overflow-tooltip="true" width="160"></el-table-column>
              <el-table-column prop="XSLXMC" label="巡视类型" :show-overflow-tooltip="true" width="160"></el-table-column>
              <el-table-column
                prop="REALDATATYPE"
                label="任务状态"
                :show-overflow-tooltip="true"
                width="160"
              ></el-table-column>
              <el-table-column prop="JHKSSJ" label="巡检时间" :show-overflow-tooltip="true" width="180"></el-table-column>
              <el-table-column
                prop="ROOMNAME"
                label="巡检区域"
                :show-overflow-tooltip="true"
                width="140"
              ></el-table-column>
              <el-table-column prop="JGMC" label="间隔单元" :show-overflow-tooltip="true" width="160"></el-table-column>
              <el-table-column
                prop="XSFSMC"
                label="巡检点类型"
                :show-overflow-tooltip="true"
                width="140"
              ></el-table-column>
              <el-table-column prop="CDSBMC" label="点位名称" :show-overflow-tooltip="true" width="200"></el-table-column>
              <el-table-column prop="TXURL" label="采集信息" :show-overflow-tooltip="true" width="100">
                <template slot-scope="scope">
                  <!-- <i class="el-icon-picture-outline" ></i> -->
                  <div>
                    <el-image
                      style="width:50px;height:30px"
                      :src="scope.row.TXURL"
                      :preview-src-list="scope.row.srcList"
                      v-if="scope.row.TXURL"
                    ></el-image>
                    <div v-else class="centerbox">-</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="SBJL" label="识别结论" :show-overflow-tooltip="true" width="100"></el-table-column>
            </el-table>
          </div>
          <div class="paged elPaginationStyle centerbox">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pages.page"
              :page-sizes="[10, 20, 30]"
              :page-size="pages.pageSize"
              layout="total,prev, pager, next,sizes, jumper"
              :total="pages.totalSize"
            ></el-pagination>
          </div>
        </div>
        <div class="main-right-bottom betweenbox">
          <!-- 折线图 -->
          <div class="main-right-bottom-left borderStyle">
            <div class="title blueTitleStyle">分析结果统计图</div>
            <div class="content">
              <inspectionLine :datas="tableData" />
            </div>
          </div>
          <!-- 视频 -->
          <div class="main-right-bottom-right borderStyle">
            <div class="title blueTitleStyle">巡检点历史采集图</div>
            <div class="content">
              <div v-for="(item,index) in imgData" :key="index">
                <el-image :src="item.TXURL" :preview-src-list="item.srcList" v-if="item.TXURL"></el-image>
                <div v-else class="centerbox">-</div>
              </div>
            </div>
            <div class="btn centerbox">
              <el-button class="btn" type="primary" @click="prevsb" :disabled="prevsbStatus">←</el-button>
              <div>{{num+'/'+max}}</div>
              <el-button class="btn" type="primary" @click="nextsb" :disabled="nextsbStatus">→</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import inspectionLine from "./inspectionLine.vue";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import { publicAPIModule } from "@/store/modules/public";
//loadsh
import lodash from "lodash";
import { Tree } from "element-ui";
interface treeItem {
  children?: treeItem[];
  menu: boolean;
  name: string;
}
interface optionList {
  value: string;
  label: string;
}
interface tableDataType {
  station?: string;
  sysId?: string;
  deviceName?: string;
  deviceType?: string;
  pointerType?: string;
  pointerName?: string;
}
@Component({
  components: { inspectionLine },
})
export default class extends Vue {
  public video: string = "";
  defaultProps: Object = {
    children: "children",
    label: "name",
  };
  $refs!: {
    tree: Tree;
  };
  // 树图
  treeData: Array<treeItem> = [];
  // 表单
  public form: any = {
    ssds: "",
    stationId: "",
    deviceName: "",
    xjdlx: "",
    rwzt: "",
    kssj: "",
    jssj: "",
  };
  // 下拉框单位名称
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }
  // 下拉框变电站
  get SubstationList() {
    let SubstationList = JointInspectionModule.LocalCityList || [];
    return SubstationList;
  }
  // 下拉框维护班组
  get getWhbzList() {
    let getWhbzList = JointInspectionModule.getDydjList || [];
    return getWhbzList;
  }
  get inspectiontype_options() {
    return JointInspectionModule.getXsfsList;
  }
  // 巡视点类型
  private xsPointList = [
    {
      code: "",
      name: "全部",
    },
  ];
  // 任务状态
  private taskStatusList = [
    {
      code: "0",
      name: "未下发",
    },
    {
      code: "1",
      name: "已下发",
    },
  ];
  // 下拉框巡检类型
  get InspectTypeList() {
    let InspectTypeList = JointInspectionModule.getXslxList || [];
    return InspectTypeList;
  }
  get treeSbSsdsId() {
    let list = publicAPIModule.queryCitysList;
    let ssdscode = "";
    if (list.length == 1) {
      ssdscode = list[0].code;
    } else if (list.length == 2) {
      ssdscode = list[1].code;
    }
    return ssdscode;
  }
  // 表格数据
  tableData: Array<tableDataType> = [
    // {
    //   station: "110kV商西变电站",
    //   sysId: "10kV开关室",
    //   deviceName: "环境监测",
    //   deviceType: "温度",
    //   pointerType: "",
    //   pointerName: "",
    // },
  ];
  tableSelect: Array<object> = [];
  loading: boolean = false;

  checkData = (rule: any, value: any, callback: any) => {
    var value1 = new Date(this.form.kssj);
    var value2 = new Date(this.form.jssj);
    // console.log(value1, value2, 22222222222222222)
    if (value1 && value2) {
      // this.$message.closeAll();
      if (value1.getTime() > value2.getTime()) {
        this.$message({
          message: "开始时间不能晚于结束时间",
          type: "warning",
        });
      } else {
        callback();
      }
    } else {
      callback();
    }
  };
  // 日期校验
  rules: any = {
    kssj: [
      {
        validator: this.checkData,
        trigger: "blur",
      },
    ],
    jssj: [
      {
        validator: this.checkData,
        trigger: "blur",
      },
    ],
  };

  //分页数据事件相关
  pages: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 10,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages.pageSize = val;
    this.pages.page = 1;
    this.getDwHistroyMsg();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.getDwHistroyMsg();
  }

  // 右侧信息展示,包括图像路径、图表数据
  getDwHistroyMsg() {
    if (this.activeTreeList.code) {
      var params = {
        cdsbid: this.activeTreeList.code,
        roomid: this.activeTreeList.pcode,
        page: this.pages.page,
        rows: this.pages.pageSize,
        jhkssj: this.form.kssj,
        jhjssj:this.form.jssj,
        rwzt: this.form.rwzt,
        xjlx: this.form.xjdlx,
        // xjdlx: 1,
      };
      console.log(params);

      (this as any).$services
        .getDwHistroyMsg({ data: params })
        .then((result: any) => {
          if (result.data) {
            var data = [];
            result.data.rows.map((k) => {
              k["srcList"] = [k.TXURL];
              data.push(k);
            });
            this.tableData = data;
            this.pages.totalSize = result.data.total
            this.max = Math.ceil(data.length / 4);
            if (this.max <= this.num) {
              this.num = 0;
              return;
            } else {
              this.setFourImg(this.num, this.max);
            }
          }
        })
        .catch((err: object) => {
          console.log(err);
        });
    }
  }

  // 查询
  onSearch() {
    (this as any).$refs["form"].validate((valid: any) => {
      if (valid) {
        this.pages.page = 1;
        this.getDwHistroyMsg();
      } else {
        console.log("error submit!!");
        return false;
      }
    });
    this.loading = false;
    // console.log(this.spsyqkdcjtqyList)
  }

  // 联合巡检首页
  goBack() {
    this.$router.push("index");
  }

  // 树图
  getAreaListdb() {
    var params = {
      ssds: this.treeSbSsdsId,
    };

    (this as any).$services
      .getAreaListdb({ data: params })
      .then((result: any) => {
        if (result.data) {
          this.treeData = result.data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 树图点击事件
  activeTreeList: any = {};
  handleNodeClick(data: any) {
    this.activeTreeList = {}
    console.log(data);
    if (data.type == "cd") {
      this.activeTreeList = data;
      this.getDwHistroyMsg();
    }
  }
  // 过滤
  filterNode(value: string, data: { name: string }) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  }
  @Watch("video")
  private watchfilter(val: string) {
    let tree = this.$refs.tree;
    // console.log(tree);
    if (tree) {
      tree.filter(val);
    }
  }

  // -------------------表格选择事件--------------------
  handleSelectionChange(val: any): void {
    // console.log(val);
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }

  // ----------------------右下图片-----------------------
  prevsbStatus = false;
  nextsbStatus = false;
  imgData = [];
  num = 1;
  max = 1;
  // 四张图片
  setFourImg(val, max) {
    this.imgData = this.tableData.slice((val - 1) * 4, val * 4);
    // console.log(val, max);
  }
  // 上一页
  prevsb() {
    if (this.num < 2) {
      return;
    }
    this.num--;
    this.setFourImg(this.num, this.max);
  }
  // 下一页
  nextsb() {
    if (this.num >= this.max) {
      return;
    }
    this.num++;
    this.setFourImg(this.num, this.max);
  }

  mounted() {
    this.getAreaListdb();
    // this.getDwHistroyMsg();
  }
}
</script>

<style lang="scss" scoped>
.analyzing-results-inspection {
  width: 100%;
  height: 100%;
  padding:0 0.24rem;
  .top {
     height: 0.3rem;
        margin-top: 0.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
  }
  .main {
    width: 100%;
    height: calc(100% - 0.4rem);
    padding: 0.1rem 0;
    box-sizing: border-box;
    &-left {
      width: 3.03rem;
      height: 100%;
      padding: 0.1rem;
      box-sizing: border-box;
      .content-tree {
        height: 100%;
        overflow-y: auto;
      }
      .custom-tree-node {
        width: 100%;
        height: 0.3rem;
        box-sizing: border-box;
        line-height: 0.3rem;
        .context-menu {
          span {
            margin: 0rem 0.02rem;
          }
        }
      }
      .margin {
        height: 0.1rem;
        border-bottom: 1px solid rgba(95, 115, 171, 0.6);
      }
      .search {
        width: 0.3rem;
        height: 0.3rem;
        border-right: 1px solid #717ca1;
        color: #9eeaec;
      }
    }
    &-right {
      width: calc(100% - 3.2rem);
      height: 100%;
      &-top {
        width: 100%;
        // height: 4.1rem;
        height: 55%;
        .form {
          width: 100%;
          height: 1.05rem;
          padding: 0;
          box-sizing: border-box;
          .form-btn {
            margin-bottom: 0.1rem;
          }
        }
        .table {
          width: 100%;
          height: calc(100% - 1.45rem);
        }
        .paged{
          width: 100%;
          height: 0.3rem;
        }
      }
      &-bottom {
        width: 100%;
        // height: calc(100% - 4.5rem);
        height: calc(45% - 0.1rem);
        &-left {
          width: calc(50% - 0.1rem);
          height: 100%;
          .content {
            height: calc(100% - 0.3rem);
          }
        }
        &-right {
          width: calc(50% - 0.1rem);
          height: 100%;
          .content {
            height: calc(100% - 0.8rem);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            text-align: center;
            > div {
              width: 50%;
              height: 50%;
              >div{
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.analyzing-results-inspection {
  .el-form-item__content {
    width: calc(100% - 1.25rem);
    .el-select {
      width: 100%;
    }
    .el-date-editor.el-input {
      width: 100%;
    }
  }
  .el-form-item {
    width: 100%;
    margin-bottom: 0.1rem;
  }
  .el-form {
    .el-button--primary {
      width: 1.1rem;
      font-size: 0.18rem;
    }
  }

  .el-button {
    width: 1.1rem;
  }
  .el-form-item__label {
    padding: 0;
  }
  .el-table__body td {
    padding: 0.04rem 0;
}
}
</style>

